<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑</title>
<link rel="stylesheet" href="../../res/layui/css/layui.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../../res/layui/layui.js"></script>
</head>
<body style="padding:20px 40px 0px 40px;">
	<form class="layui-form" id="myFrom" method="post" lay-filter="from">
	<input type="hidden" id="roleId" name="roleId" >
	  <div class="layui-form-item">
	    <label class="layui-form-label">角色名称</label>
	    <div class="layui-input-block">
	      <input type="text" id="roleName" name="roleName" maxlength="20" lay-verify="required|roleName" placeholder="请输入名称" autocomplete="off" class="layui-input" style="width:280px;">
	    </div>
	  </div>
	  <div class="layui-form-item">
			<label class="layui-form-label">角色编码</label>
			<div class="layui-input-inline">
				<input type="text" id="roleEncoded" name="roleEncoded" required
					lay-verify="required|roleEncoded" placeholder="角色编码" autocomplete="off"
					class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux"></div>
		</div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">角色模块</label>
	    <div class="layui-input-block"  style="margin-bottom: 30px">
	    	<input type="hidden" id="mmId" name="mmId" >
	    	<ul id="moduleTree"></ul>
	    </div>
	  </div>
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">角色描述</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" maxlength="20" lay-verify="roleDescribe" name="roleDescribe" id="roleDescribe" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <input type="button" class="layui-btn" lay-submit="" lay-filter="demo" id="submit" value="提交">
	    </div>
	  </div>
 </form>
<script type="text/javascript" src="../../res/layui-xtree/layui-xtree.js"></script>
<script type="text/javascript">
layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element','tree'], function(){
	  var form = layui.form
	  ,laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  ,layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,upload = layui.upload //上传
	  ,element = layui.element; //元素操作
	//去父页面传过来的参数
		var roleId = GetQueryString("roleId");
		if(roleId!='undefined'){
			findById(roleId);
		}else{
			getTree();
		}
		
		//根据模块id查询所有
		function findById(id){
			
			if(id!=null && id!=""){
				$.ajax({
					type : "POST",
					url:"../../listenModuleRole/moduleTree.action",
				  	data:{"roleId":id},
					dataType:'json',
					async : true,
					success:function(data){
				  		 var moduleTree = new layuiXtree({
				  		      elem: 'moduleTree'                  //必填
				  		      , form: form                    //必填
				  		      , data: data 		//必填
				  		      , isopen: false  //加载完毕后的展开状态，默认值：true
				  		      , ckall: true    //启用全选功能，默认值：false
				  		      , ckallback: function () {	//全选后调用该方法
				  		    	
			  		        }
				  		      , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
			  	           		open: "&#xe625;"       //节点打开的图标
				  	            , close: "&#xe623;"    //节点关闭的图标
				  	            , end: "&#xe64c;"      //末尾节点的图标
					  	        }
					  	        , color: {       //三种图标颜色，独立配色，更改几个都可以
					  	            open: "#009f95"        //节点图标打开的颜色
					  	            , close: "#009f95"     //节点图标关闭的颜色
					  	            , end: "#009f95"       //末级节点图标的颜色
					  	        }
			  		        , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
			  		        	
			  		        }
			  		 	});
				  	 	 //表单渲染
				  		layui.form.render();
					}	
				});
				$.ajax({
					type : "POST",
					url : "../../listenRole/findById.action",
					data : {"roleId":id},
					dataType:'json',
					async : true,
					success : function(mes){
						$("#roleId").val(mes.roleId);
						$("#roleEncoded").val(mes.roleEncoded);
						$("#roleName").val(mes.roleName);
						$("#roleDescribe").val(mes.roleDescribe);
					}
				});
				
			}
		}
		
		/*查询所有的模块*/
		function getTree(){
			var moduleTree = new layuiXtree({
		        elem: 'moduleTree'                  //必填三兄弟之老大
		        , form: form                    //必填三兄弟之这才是真老大
		        , data: '../../listenModuleManage/selectGroup.action' //必填三兄弟之这也算是老大
		        , isopen: false  //加载完毕后的展开状态，默认值：true
		        , ckall: true    //启用全选功能，默认值：false
		        , ckallback: function () { //全选框状态改变后执行的回调函数
		        } //全选框状态改变后执行的回调函数
		        , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
		            open: "&#xe625;"       //节点打开的图标
		            , close: "&#xe623;"    //节点关闭的图标
		            , end: "&#xe64c;"      //末尾节点的图标
		        }
		        , color: {       //三种图标颜色，独立配色，更改几个都可以
		            open: "#009f95"        //节点图标打开的颜色
		            , close: "#009f95"     //节点图标关闭的颜色
		            , end: "#009f95"       //末级节点图标的颜色
		        }
		        , click: function (data) {
		        	
		        }
		    });
		}
		
		//自定义验证规则
		form.verify({
			roleName : function(value){
				if(value.indexOf(" ")>-1){
					return "角色名称不能包含空格";
				}else if(value.length<=0 || value.length>=11){
					return "角色名称在1~10字符之间";
				}
			},
			mmId : function(value){
				if(value.indexOf(" ")>-1){
					return "模块不能为空";
				}
			},
			roleEncoded : function(value){
				if(value.indexOf(" ")>-1){
					return "角色编码不能包含空格";
				}
			},
			roleDescribe : function(value){
				if(value.indexOf(" ")>-1){
					return "角色说明不能包含空格";
				}else if(value.length>500){
					return "角色说明不能超过500字符";
				}
			}
		});
		//监听提交 增加或修改
		form.on('submit(demo)', function(data){
			var name = $("#roleName").val();
			var module = $("#mmId").val();
			var encoded = $("#roleEncoded").val();
			var describe = $("#roleDescribe").val();
			var b = true;
			if(name.indexOf(" ")>-1 || (name.length<=0 || name.length>=11)){
				b=false;
			}else if(module.indexOf(" ")>-1){
				b=false;
			}else if(encoded.indexOf(" ")>-1){
				b=false;
			}else if(describe.indexOf(" ")>-1 || describe.length>500){
				b=false;
			}else{
				var id="";
				$.each($('input:checkbox:checked'),function(){
					if($(this).val() != "on"){
						id += $(this).val()+",";
					}
				});
		        $("#mmId").val(id);
				layer.confirm('确认提交吗?', function(index){
			    	layer.close(index);
			        var url = "../../listenModuleRole/insertOrUpdate.action";
					var data =$.param({"mmId":$("#mmId").val()}) + "&" +$("#myFrom").serialize();
			        $.post(url,data,function(mes){
			        	//提示框(是否增加成功或者修改成功)
						layer.msg(mes.msg, {
							  icon: mes.datas,
							  time: 1000 //1秒关闭（如果不配置，默认是3秒）
							}, function(){
							  parent.location.reload();
						});
			        },"json");
				});
			}
			return b;
		});
});

//得到父窗口传过来的参数
function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

</script>
</body>
</html>